<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
       .float{
       	  width: 150px;
       	  height: 300px;
       	  background-color: #000;
       	  position: absolute;
       	  top: 100px;
       	  left: 500px;
       }
       .son{
       	  width: 150px;
       	  height: 80px;
       	  background-color: yellow;
       	  position: absolute;
       	  top: 400px;
       	  left:500px;
       	  visibility: hidden;
       }
	</style>
</head>
<body>
	<div class="float" id="float">
		
	</div>
	<div class="son" id="son">
		
	</div>
</body>
<script type="text/javascript">
	var thisTop =  parseInt(document.getElementById("float").offsetTop);
	var son = parseInt(document.getElementById("son").offsetTop);
	function run () {
		thisTop-=0.07;
		document.getElementById("float").style.top = thisTop+"px";
		if(thisTop<=98){
			clearInterval(upTop);
		}
	}
	function sonRun () {
		document.getElementById("son").style.visibility="visible";
		son -= 3;
		document.getElementById("son").style.top = son+"px";
		if(son<=320){
			clearInterval(upSon);
		}
	}
	function back () {
		thisTop+=0.07;
		document.getElementById("float").style.top = thisTop+"px";
		if(thisTop>=100){
			clearInterval(downTop);
		}
	}
	function sonBack () {
		document.getElementById("son").style.visibility="visible";
		son += 6;
		document.getElementById("son").style.top = son+"px";
		if(son>=400){
			clearInterval(downSon);
			document.getElementById("son").style.visibility="hidden";
		}
	}
    document.getElementById("float").onmouseover = function () {
    	    upTop = setInterval(run,0.9);
            upSon = setInterval(sonRun,0.5);
    }
    document.getElementById("float").onmouseout = function () {
    	    downTop = setInterval(back,0.9);
    	    downSon = setInterval(sonBack,0.5);

    }
</script>
</html>